<template>
  <div id="printBigBox">
    <div id="box">
      <h1 class="headerBox">
        <span>商品进货单</span>
      </h1>
      <div>
        <span>编号: {{ dataObj.billNo }}</span>
      </div>
      <div class="headerList">
        <div>
          <span class="margin-l10">供应商 : {{ dataObj.comegoName }}</span>
        </div>
        <div>
          <span>经手人 : {{ dataObj.handUserName }}</span>
        </div>
        <div>
          <span>业务日期 : {{ dataObj.businessTime }}</span>
        </div>
      </div>
      <ShowGoodsListPrint
        ref="GoodsListPrint"
        class="print-table"
        :table-data="printTable"
      />
      <div class="footBox">
        <div>应付金额 : {{ dataObj.amountPayable }}</div>
        <div>实付金额 : {{ dataObj.amountPaid }}</div>
      </div>
    </div>
    <span slot="footer">
      <el-button type="primary" @click="printBtn">打印</el-button>
      <el-button type="default" @click="visible = false">取消</el-button>
    </span>
  </div>
</template>

<script>
import { ShowGoodsListPrint } from './commonPrint'
import { Print } from '@/utils/print'

export default {
  name: 'PrintPage',
  components: {
    ShowGoodsListPrint
  },
  props: {
    // dataObj: {
    //   type: Object,
    //   default: () => { return {} }
    // },
    printTable: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      dataObj: {}
    }
  },
  methods: {
    into() {
      this.visible = true
    },
    printBtn() {
      Print(document.getElementById('printBigBox'))
    }
  }
}
</script>

<style scoped>
    #box {
        color: #000000;
    }
    .headerBox {
        text-align: center;
    }
    .headerBox .odd {
        font-size: 14px;
        float: right;
        font-weight: 300;
        line-height: 38px;
        margin-right: 20px;
    }
    .headerList {
        display: grid;
        grid-template-columns: repeat(3, 33.33%);
        grid-template-rows: repeat(1, 24px);
        line-height: 24px;
    }
    .footBox{
        display: grid;
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: repeat(1, 24px);
    }
    .print-table{
        margin: 5px 0;
    }
</style>
